<template>
    <div class="box">
        <div class="row hall_article_logo_info">
            <div class="col-xs-3 hall_article_logo">
                <img :src="logo" width="80px" height="80px" alt="">
            </div>
            <h3 class="col-xs-9">{{ name }}</h3>
            <span class="col-xs-9">所属行业：{{ industry }}</span>
            <span class="col-xs-9">展位编号：<strong id="hall_id">{{ booth }}</strong></span><!--其输出大写字母加数字，没有编号是请输出：无-->
        </div>
        <div class="row hall_article_text">
            {{ introduce }}
        </div>
        <div class="row">
            <div class="col-xs-12 busimee_title">
                <h3><i class="iconfont icon-service"></i>Exhibits</h3>
            </div>
        </div>
        <div class="row exhibits">
            <div class="col-xs-12 col-sm-6 exhibits_list" v-for="item in product" :key="item.productId">
                <div class="row">
                    <div class="col-xs-4 exhibits_list_img">
                        <a href="exhibits_article.html">
                            <img :src="item.productImgUrl" width="100%" class="img-thumbnail" alt="Responsive image"><!--此处的图片在后台上传时就要限制大小,500*500-->
                        </a>
                    </div>
                    <div class="col-xs-8 exhibits_list_text">
                        <a href="exhibits_article.html">
                            <span>{{ item.productName }}...</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return {
            logo:'',
            name:'',
            industry:'',
            booth:'',
            introduce:'',
            product : []
        }
    },
    methods:{
        getExhibitorsInfo(){
            axios.get('/api/exhibitors.json?id=' + this.$route.params.id)
            .then(this.getExhibitorsInfoSucc)
        },
        getExhibitorsInfoSucc(res){
            res = res.data
            if(res.ret && res.data){
                var data = res.data
                this.logo = data.logo
                this.name = data.name
                this.industry = data.industry
                this.booth = data.booth
                this.introduce = data.introduce
                this.product = data.product
            }
        }
    },
    mounted(){
        this.getExhibitorsInfo()
    }
}
</script>
<style scoped>
    .hall_article_logo_info img {
        float: left; }

    .hall_article_logo_info h3 {
        font-weight: bold;
        font-size: 18px; }

    .hall_article_logo {
        margin-top: 20px; }

    .hall_article_text {
        padding: 15px; }
</style>
